<template>
    <div class="h-tree">
        <div>
            <a-icon
                v-if="showCollapse"
                class="h-tree-toggle"
                :class="collapsed ? 'h-trigger' : 'h-untrigger'"
                :type="collapsed ? 'left' : 'right'"
                @click="clickCollapsed"
            />
        </div>

        <div v-show="collapsed">
            <a-divider v-if="title" orientation="left" class="h-divider">{{ title }}</a-divider>
            <a-tree
                showIcon
                style="overflow-y:auto"
                v-if="!!treeData.length"
                :checkable="checkable"
                :draggable="draggable"
                :treeData="treeData"
                :defaultExpandAll="defaultExpandAll"
                :defaultSelectedKeys="defaultSelectedKeys"
                :defaultExpandedKeys="defaultExpandedKeys"
                :defaultCheckedKeys="defaultCheckedKeys"
                @select="onSelect"
                @check="onCheck"
                @rightClick="onRightClick"
                :loadData="onLoadData"
                @drop="onDrop"
            >
                <template slot="icon" slot-scope="scope">
                    <div
                        :style="{
                            background: '#ffffff url(' + scope.icon + ') no-repeat center top',
                            display: 'inline-block',
                            backgroundSize: '100%',
                            width: '16px',
                            height: '16px',
                        }"
                    />
                </template>
            </a-tree>
        </div>
    </div>
</template>
<script>
/**
 * Tree组件，带操作按钮.
 * @constructor
 * @param {array} treeData - 数数据.
 */
export default {
    data() {
        return {
            title: this.treeTitle,
            selectedKeys: [],
            checkedKeys: [],
            collapsed: true,

            defaultCheckedKeys: [],
        };
    },
    props: {
        defaultExpandAll: {
            type: Boolean,
            default: true,
        },
        treeData: {
            type: Array,
            default: () => {
                return [];
            },
        },
        treeTitle: {
            type: String,
            default: "",
        },
        checkable: {
            type: Boolean,
            default: false,
        },
        draggable: {
            type: Boolean,
            default: false,
        },
        showCollapse: {
            type: Boolean,
            default: false,
        },
        defaultSelectedKeys: {
            type: Array,
            default: () => {
                return [];
            },
        },
        defaultExpandedKeys: {
            type: Array,
            default: () => {
                return [];
            },
        },
        onLoadData: {
            type: Function,
        },
    },
    beforeCreate() {},
    created() {},
    mounted() {},
    computed: {
        changeCollapsed: {
            get: function() {
                return this.collapsed;
            },
            set: function(val) {
                this.collapsed = val;
            },
        },
    },
    methods: {
        /**
         * @description 折叠事件回调函数
         * @returns {array} names - 按钮名称
         */
        clickCollapsed() {
            this.collapsed = this.collapsed ? false : true;
            // eslint-disable-next-line no-console
            console.log("clickCollapsed");
            this.$emit("eCollapsed", this.collapsed);
        },
        /**
         * @description 选择树节点回调函数
         * @returns {array} names - 按钮名称
         */
        onSelect(selectedKeys, e) {
            this.selectedKeys = selectedKeys;
            this.$emit("onSelect", this.selectedKeys, e, [...this.treeData]);
        },
        /**
         * @description 勾选树节点回调函数
         * @returns {array} names - 按钮名称
         */
        onCheck(checkedKeys, e) {
            this.$emit("onCheck", checkedKeys, e);
        },
        onRightClick(e) {
            this.$emit("onRightClick", e);
        },
        onDrop(info) {
            this.$emit("onDrop", info);
        },
    },
    components: {
        // "button-group": ButtonGroup
    },
};
</script>
<style lang="less" scoped>
@btn-padding: 10px;

.h-tree-toggle {
    position: absolute;
    top: 10px;
    width: 16px;
    height: 38px;
    background-color: #dbdbdb;
    text-align: center;
    font-size: 12px;
    color: #777;
    line-height: 38px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.h-trigger {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    left: auto;
    right: 0;
    z-index: 10000px;
}
.h-untrigger {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    left: 0;
    right: auto;
}

.h-divider {
    padding-right: 30px;
    z-index: 1;
    font-size: 14px;
}
</style>
